import {
  Card, Input, Pagination, Popconfirm, Space,
} from 'antd';
import Meta from 'antd/es/card/Meta';
import { useDeleteStudent, useGetStudents } from '@/services/student';
import { PageContainer } from '@ant-design/pro-components';
import { IStudent } from '@/utils/types';
import { currentOrg } from '@/utils';
import { useMemo, useState } from 'react';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import style from './index.module.less';
import EditStudent from './components/EditStudent';

/**
* 学员管理
*/
const Student = () => {
  const {
    data, loading, refetch, page,
  } = useGetStudents();
  // 门店切换，重新渲染
  const res = currentOrg();
  const [delHandler, delLoading] = useDeleteStudent();
  useMemo(() => {
    refetch();
  }, [res]);
  const onPageChangeHandler = (pageNum:number, pageSize:number) => {
    refetch({
      page: {
        pageNum,
        pageSize,
      },
    });
  };
  const onSearchHandler = (name:string) => {
    refetch({
      name,
    });
  };
  const confirm = (id:string) => {
    delHandler(id, refetch);
  };
  const [curId, setCurId] = useState('');
  const [show, setShow] = useState(false);
  const onClickAddHandler = (id?: string) => {
    if (id) {
      setCurId(id);
    } else {
      setCurId('');
    }
    setShow(true);
  };
  const changeShow = () => {
    setShow(false);
    setCurId('');
  };
  return (
    <div className={style.container}>
      <PageContainer
        loading={loading}
        header={{
          title: '学员管理',
        }}
      >
        <Card>
          <div className={style.cardBox}>
            <Input.Search
              allowClear
              enterButton
              className={style.iptSearch}
              onSearch={onSearchHandler}
              placeholder="请输入学员名字进行搜索"
            />
          </div>
        </Card>
        <Card>
          <div className={style.card}>
            {
              data?.map((item:IStudent) => (
                <Card
                  key={item.id}
                  hoverable
                  style={{ width: 240 }}
                  cover={(
                    <div
                      className={style.avatar}
                      style={{ backgroundImage: `url(${item.avatar || 'http://water-drop-assets.oss-cn-hangzhou.aliyuncs.com/images/1675623073445.jpg'} )` }}
                    />
                  )}
                  actions={[
                    <div onClick={() => onClickAddHandler(item.id)}>
                      <EditOutlined key="edit" />
                      &nbsp;编辑
                    </div>,
                    <div>
                      <Popconfirm
                        title="删除"
                        description="确认删除该学员信息吗?"
                        onConfirm={() => confirm(item.id)}
                        okText="确认"
                        cancelText="取消"
                        okButtonProps={{ loading: delLoading }}
                      >
                        <DeleteOutlined key="delete" />
                        &nbsp;删除
                      </Popconfirm>
                    </div>,
                  ]}
                >
                  <Meta
                    title={item.name || '无名氏'}
                    description={<Space>{[item.account || '无账号', item.tel || '无手机号']}</Space>}
                  />
                </Card>
              ))
            }
          </div>
          <div className={style.page}>
            <Pagination
              defaultCurrent={page?.pageNum}
              pageSize={page?.pageSize}
              total={page?.total}
              onChange={onPageChangeHandler}
            />
          </div>
        </Card>
        <EditStudent id={curId} show={show} onChangeShow={changeShow} />
      </PageContainer>
    </div>
  );
};

export default Student;
